<template>
  <view>
    <view v-if="postDetail.title">
      <view class="postitem-top" v-if="teamFlag === false">
        <view class="image-item">
          <view v-for="(item,index) in users" :key="index" >
              <view class="image-item-avatar" @click="gotoUserPage(item)">
                <image :src="item.avatar" mode=""></image>
                <text v-if="index === 0">发起人</text>
              </view> 
          </view>
          <view class="image-item-avatar" v-if="postDetail.num-postDetail.currentNum !== 0">
              <image src="https://s2.loli.net/2022/05/21/9qjUn8hkV5aHWue.png"></image>
          </view>      
        </view>
        
          <view class="postitem-top-mid">
            <view class="postitem-time">
              <image src="https://s2.loli.net/2022/05/07/Wkb6jThPHzMEvJI.png" mode=""></image>
              <text>{{postDetail.beginTime}}</text>
              <!-- <text>2022-12-08 19:15:00</text> -->
            </view>
            <view class="postitem-num">
              <image src="https://s2.loli.net/2022/05/07/IdUkV2A3j7xFiYr.png" mode=""></image>
              <text v-if="postDetail.num-postDetail.currentNum !== 0">需要{{postDetail.num-postDetail.currentNum}}人</text>
              <text v-else>人满啦！</text>
            </view>
          </view>
          <view class="postitem-top-buttom">
            <view class="postitem-content">
              <view class="postitem-content-item">
                <text>标题</text>
                <text class="postitem-content-right">{{postDetail.title}}</text>
              </view>
              <view class="postitem-content-item">
                <text>内容</text>
                <text class="postitem-content-right">{{postDetail.content}}</text>
              </view>
              <view class="postitem-content-item">
                <text>微信</text>
                <text class="postitem-content-right">{{postDetail.relation}}</text>
              </view>
            </view>
          </view>
          <view class="postitem-button" v-if="!isPost && !isMember">
            <button type="default" @click="formTeam">立即组队</button>
          </view>
          <!-- 底部信息提示区域 -->
          <view class="postitem-buttom-message" v-else-if="!postDetail.isOverdue && postDetail.num-postDetail.currentNum !== 0">
            <view class="message-text" v-if="">
              还差<text>{{postDetail.num-postDetail.currentNum}}人</text>组队成功
            </view>
            <uni-countdown :day="timer.day" :hour="timer.hour" :minute="timer.minute" :second="timer.second" :show-colon="false" />
          </view>
          <!-- 组队失败提示区域 -->
          <view class="postitem-buttom-fail" v-if="postDetail.isOverdue && postDetail.num-postDetail.currentNum !== 0">
            <image src="https://s2.loli.net/2022/05/21/CYSPVr93oHuthQa.png" mode=""></image>
            <text>组队失败</text>
          </view>
          <!-- 组队成功提示区域 -->
          <view class="postitem-buttom-success" v-else-if="(isPost || isMember) && postDetail.num-postDetail.currentNum === 0">
              <image src="https://s2.loli.net/2022/05/21/1WCdAMnYtRJyx3P.png" mode=""></image>
              <text>组队成功</text>
          </view>
          <!-- 加入组队成功提示区域 -->
          <view class="postitem-buttom-member-success" v-else-if="isMember && !isPost">
            <text>您已成功加入~</text>
          </view>
        </view>
      <!-- </view> -->
      <view class="postitem-buttom" v-else>
        <view class="postitem-buttom-item">
          <image src="https://s2.loli.net/2022/05/05/V51Gpo9Eqxl3bBk.png" mode=""></image>
          <text>组队成功</text>
        </view>
        <view class="postitem-button">
          <button type="default" @click="goBack">返回</button>
        </view>
      </view>
    </view>
    <view class="postitem-buttom" v-else>
      <view class="postitem-buttom-item">
        <image src="https://s2.loli.net/2022/07/01/khsW8peL2lxaKym.png" mode=""></image>
        <text>该组队已删除或过期</text>
      </view>
    </view>
  </view>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  export default {
    data() {
      return {
        timer: {},
        serialNumber: 0,
        teamFlag: false,
        postDetail: [],
        users: [],//用户信息
        isPost: '', //为true不显示组队按钮
        isMember: '',
        query: {}
      };
    },
    computed: {
      ...mapState('user_module',['userinfo','username','userphone','useremail']),
      ...mapState('postitem_module',['isDot'])
    },
    methods: {
      ...mapMutations('postitem_module',['updateIsDot']),
      gotoUserPage(item) {
        if(this.username === '' || this.userphone === '' || this.useremail === '') {
          uni.showModal({
            title: '提示',
            content: '您的信息尚未完善，请先完善个人信息',
            showCancel: false,
            confirmText: '去完善',
            success(res) {
              if (res.confirm) {
                    uni.navigateTo({
                      url: '../../subpkg/userinfo/userinfo'
                    })
              } 
            },
          })
        } else {
          uni.navigateTo({
            url: '../userpage/userpage?id=' + item.id + '&avatar=' + item.avatar
          })
        }
      },
      async getPostDetail() {
        const {data:{data:{currentTask:res}}} = await uni.$http.get('/api/task/selectTask/' + this.serialNumber).catch(err => uni.$showMsg('网络错误！'))
        this.postDetail = res
        const {beginTime} = res
        let nowtime = new Date(),  //获取当前时间
          endtime = new Date(beginTime)  //定义结束时间
            let lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
               leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
                lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
                leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
                lefts = Math.floor(lefttime/1000%60);  //计算秒数
             this.timer = {
               day: leftd,
               hour: lefth,
               minute: leftm,
               second: lefts
             }
      },
      async formTeam() {
        const {data:res} = await uni.$http.post('/api/task/join',this.postDetail).catch(err => uni.$showMsg('网络错误！'))
        if(res.code !== 200) return uni.$showMsg('人数已满，组队失败！')
        if(res.message === '加入成功！') {
          this.teamFlag = true
          this.updateIsDot(true)
        }
        else if(res.message === '不能加入自己！') return uni.$showMsg('不能加入自己的组队哦！')
      },
      goBack() {
        uni.showLoading({
          title: '加载中...'
        })
        setTimeout(() => {
          this.getPostDetail()
          this.getIsPost()
          this.getIsMember()
          this.getAvatar()
          this.teamFlag = false
          uni.hideLoading()
        },400)
      },
      //判断是否为当前人所发布
      async getIsPost() {
        const {data:{data:{flag}}} = await uni.$http.get('/api/judge/by/' + this.serialNumber)
        this.isPost = flag
      },
      //判断是否为该任务成员
      async getIsMember() {
        const {data:{data:{flag}}} = await uni.$http.get('/api/judge/baby/isMember/by/' + this.serialNumber).catch(err => uni.$showMsg('网络错误！'))
        this.isMember = flag
      },
      async getIsFull() {
        const {data:{data:{flag}}} = await uni.$http.get('/api/judge/baby/isMember/by/' + this.serialNumber).catch(err => uni.$showMsg('网络错误！'))
      },
      async getAvatar() {
        const {data:res} = await uni.$http.get('/get/avatars/of/theJoined/' + this.serialNumber).catch(err => uni.$showMsg('网络错误！'))
        this.users = res  
      },
    },
    onLoad(e) {
      this.serialNumber = e.id
      this.getPostDetail()
      this.getIsPost()
      this.getAvatar()
      this.getIsMember()
    },
    // 下拉刷新
    onPullDownRefresh() {
      this.getPostDetail()
      this.getIsPost()
      this.getIsMember()
      this.getAvatar()
      setTimeout(() => {
        uni.stopPullDownRefresh()   
      },500)
    }
  }
</script>

<style lang="scss">
  .image-item {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    .image-item-avatar {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 15px 8px 0 8px;
        image {
          border-radius: 60px;
          width: 60px;
          height: 60px;
        }
        text {
          background-color: #FCE083;
          position: absolute;
          padding: 3px;
          top: 50px;
          display: inline-block;
          color: black;
          font-size: 12px;
          border: 1px solid white;
          border-radius: 5px;
        }
      }
    }
    .postitem-top-mid {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 45px 20px 20px 20px;
      .postitem-time {
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 35px;
          height: 35px;
          margin: 0 5px 0 0;
        }
        text {
          font-size: 16px;
        }
      }
        .postitem-num {
          display: flex;
          justify-content: center;
          align-items: center;
          image {
            width: 35px;
            height: 35px;
          }
          text {
            display: inline-block;
            margin: 0 0 0 5px;
          }
        }
    } 
    .postitem-top-buttom {
      border: 1px solid #FFFFFF;
      // height: 200px;
      border-radius: 12px;
      margin: 10px 20px;
      background-color: #FFFFFF;
      .postitem-content {
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        // align-items: center;
        .postitem-content-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #E0E0E0;
          padding: 15px 8px;
          .postitem-content-right {
            display: block;
            margin: 0 8px;
            width: 300px;
          }
        }
      }
    }
    .postitem-buttom-message {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 50px 15px;
      .message-text {
        font-size: 14px;
        text {
          color: red;
          font-size: 15px;
        }  
      }
    }
    .postitem-buttom-fail {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 60px 0;
      image {
        width: 43px;
        height: 43px;
        margin-right: 10px;
      }
      text {
        font-size: 21px;
        color: red;
      }
    }
    .postitem-buttom-success {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 30px 0;
      image {
        width: 43px;
        height: 43px;
        margin-right: 10px;
      }
      text {
        font-size: 21px;
        color: #07C160;
      }
    }
    .postitem-buttom-member-success {
      height: 100px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      text {
        font-size: 16px;
        color: #A9E08F;
      }
    }
    .postitem-button {
      display: flex;
      justify-content: center;
      margin: 60px 0;
      button {
        border: 1px solid #000000;
        box-shadow: 0 1px 5px rgba(0,0,0,0.3);
        border-radius: 20px;
        width: 240px;
      }
    }
    .postitem-buttom {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .postitem-buttom-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        image {
          margin-bottom: 10px;
          margin-top: 130%;
          width: 90px;
          height: 90px;
        }
        text {
          font-size: 17px;
        }
      }
    }
  
</style>
